<template>
	<view class="my-red-box">
		<!-- <page-head>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right">{{''}}</slot>
		</page-head> -->
		<view class="step1" v-if="step==1" >
			<image  class="step1-image-bg" src="../../static/img/redpackage/step11.png" mode="widthFix"></image>
			<image @click="goStep()" class="step1-image-btn" src="../../static/img/redpackage/step2.png" mode="widthFix"></image>
		</view>
		<view class="step2" v-if="step==2" >
			<image class="step2-image-bg" src="../../static/img/redpackage/step31.png" mode="widthFix"></image>
			<view class="msg-box">
				<view class="phone">
					<input type="text" value="" maxlength="11" v-model="mobile" @blur="ScrollTo()" placeholder="您的手机号"/>
				</view>
				<view class="yzm-box" >
					<input class="yzm" type="text" maxlength="4" v-model="captcha" @blur="ScrollTo()" placeholder="您的图形验证码">
					<view @click="getCaptcha()">
						<image :src="captchaUrl" mode="widthFix"></image>
					</view>
				</view>
				<image @click="getRedbackage()" class="step2-image-btn" src="../../static/img/redpackage/step4.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="step3" v-if="step==3">
			<image class="step3-image-bg" src="../../static/img/redpackage/step51.png" mode="widthFix"></image>
			<image @click="close()" class="step3-image-btn" src="../../static/img/redpackage/step6.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import ValidForm from '../../common/js/valid-form.js';
	export default {
		data() {
			return {
				step:1,
				uuid:"",
				captcha:'',
				mobile:'',
				captchaUrl:"",
				title:'领取红包'
			}
		},
		onLoad(event) {
			
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			this.getCaptcha();
			this.height="height:"+window.innerHeight+"px !improtant";
			console.log(this.height);
		},
		methods:{
			goStep(){
				if(this.step<3){
					this.step++;
				}
			},
			getUUID () {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			},
			ScrollTo(top){
				uni.pageScrollTo({ scrollTop: 900, duration: 300 });
			},
			//获取红包
			getRedbackage(){
				try {
					let that =this;
					that.ScrollTo()
					let valid = new ValidForm(this.mobile, '', '');
					if(valid.validPhoneNum(this.mobile) == true){
						if(this.captcha==''|| !this.captcha){
							uni.showToast({
								title: '验证码不能为空',
								icon:'none',
								duration: 2000
							})
							return
						}
						uni.request({
							url: this.$usereq + '/coupon-customer/customer/h5red/get',
							method: 'POST',
							header: {
								'blade-auth': decodeURI(uni.getStorageSync('token')),
								'content-type': 'application/json'
							},
							data: {
								uuid:this.uuid,
								captcha:this.captcha,
								mobile:this.mobile
							},
							success: res => {
								let datas = res;
								if(res.statusCode==200){
									if(res.data.code==200){
										uni.showToast({
											title: '提交成功',
											icon:'success',
											duration: 1500
										});
										setTimeout(function(){
											that.goStep();
										},1500)
									}else{
										uni.showToast({
											title: res.data.msg,
											icon:'none',
											duration: 2000
										});
									}
								}else{
									uni.showToast({
										title: res.errMsg,
										icon:'none',
										duration: 2000
									});
								}
								console.log(datas);
								uni.stopPullDownRefresh();
							}
						});
					}
				} catch (e) {
					console.log(e.message);
				}
			},
			//获取验证码
			getCaptcha(){
				this.uuid=this.getUUID ();
				console.log(this.uuid);
				this.captchaUrl = this.$usereq + '/coupon-customer/customer/h5red/captcha.jpg?uuid=' + this.uuid 
				uni.hideLoading();
			},
			//关闭页面
			close(){
				WeixinJSBridge.call('closeWindow');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		overflow: hidden !important;
	}
	image{
		display: block;
	}
	.my-red-box{
		width: 750px;
		min-width: 750px;
		height: 100%;
		min-height: 100%;
	}
	.step1{
		height: 100%;
		position: relative;
		.step1-image-bg{
			display: block;
			width: 100%;
		}
		.step1-image-btn{
			width: 220px;
			height: 220px;
			display: block;
			position: absolute;
			top: 25%;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.step2{
		height: 100%;
		position: relative;
		.msg-box{
			width: 638px;
			height: 44.75%;
			position: absolute;
			// border: 1px solid #000;
			top: 42.72%;
			left: 50%;
			transform: translateX(-50%);
			.phone{
				margin: 0 auto;
				margin-top: 18%;
				width: 520px;
				background: #F0F4FF;
				border-radius: 10px;
				height: 75px;
				line-height: 75px;
				padding: 0 30px;
				box-sizing: border-box;
				border-radius: 8px;
				input{
					height: 65px;
					line-height: 65px;
					padding: 5px;
					box-sizing: border-box;
				}
			}
			.yzm-box{
				margin: 0 auto;
				margin-top: 14px;
				width: 520px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.yzm{
					width: 330px;
					background: #F0F4FF;
					height: 75px;
					line-height: 75px;
					border-radius: 8px;
					padding: 0 30px;
					box-sizing: border-box;
				}
				view{
					width: 173px;
					height: 75px;
					line-height: 75px;
					border-radius: 8px;
					image{
						width: 173px;
						height: 75px !important;
						border-radius: 7px;
					}
				}
			}
		}
		.step2-image-bg{
			width: 100%;
			// height: auto !important;
			// position: ;
			// top: 0;
			// left: 0;
			// right: 0;
			// bottom: 0;
		}
		.step2-image-btn{
			width: 520px;
			height: 100px;
			display: block;
			position: absolute;
			top: 320px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.step3{
		height: 100%;
		position: relative;
		.step3-image-bg{
			width: 100%;
			// height: auto !important;
			// position: fixed;
			// top: 0;
			// left: 0;
			// right: 0;
			// bottom: 0;
		}
		.step3-image-btn{
			width: 520px;
			height: 100px;
			display: block;
			position: absolute;
			top: 74%;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
